<!-- 账户创建与绑定 -->
<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="main">
            <h3 class="title">账号创建与绑定</h3>
            <div class="item">
                <img class="imgIcon" src="@/assets/img/account.png" alt="">
                <div class="textBox">
                    <div class="tit">虚拟账户</div>
                    <div class="description" v-if="virtualAccountState == 0">暂未创建虚拟账户</div>
                    <div class="description" v-else-if="virtualAccountState == 1">已提交资料，审核中...</div>
                    <div class="description" v-else-if="virtualAccountState == 2">
                        {{ resultDate.boos }}+{{ resultDate.bossIccard }}+{{ resultDate.bossPhone }}</div>
                    <div class="errorText" v-else-if="virtualAccountState == 3">开户失败：失败原因</div>
                </div>
                <div class="createdBox" v-if="virtualAccountState == 2">
                    <div class="iconfontcolor icon-chenggongtishi"></div>
                    <span class="text">已创建</span>
                </div>
                <button class="createBtn" v-else-if="virtualAccountState == 0 || virtualAccountState == 3"
                    @click="showAccountDialog">去创建</button>

            </div>
            <div class="item">
                <img class="imgIcon" src="@/assets/img/yhk.png" alt="">
                <div class="textBox">
                    <div class="tit">银行卡</div>
                    <div class="description" v-if="bankCardState == 0">暂未绑定银行卡</div>
                    <div class="description" v-else-if="bankCardState == 1">已提交资料，审核中...</div>
                    <div class="description" v-else-if="bankCardState == 2 && bankDate.bankAccountName!=undefined">
                        {{ bankDate.bankAccountName }}+{{ bankDate.bankName }}+{{ bankDate.bankAccount }}</div>
                    <div class="errorText" v-else-if="bankCardState == 3">绑卡失败：失败原因</div>
                </div>
                <div class="createdBox" v-if="bankCardState == 2">
                    <div class="iconfontcolor icon-chenggongtishi"></div>
                    <span class="text">已绑定</span>
                </div>
                <button class="createBtn" v-else-if="bankCardState == 0 || bankCardState == 3"
                    @click="showBankCardDialog">去创建</button>

            </div>
        </div>
        <el-dialog class="dialog" title="创建虚拟账户" :visible.sync="visibleAccount" width="585px">
            <el-form ref="virtualAccountForm" :model="virtualAccountForm" :rules="virtualAccountRules" label-width="125px">
                <el-form-item label="统一社会信用代码" prop="taxpayerIdentificationNumber">
                    <el-input size="small" v-model="virtualAccountForm.taxpayerIdentificationNumber"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="companyName">
                    <el-input size="small" v-model="virtualAccountForm.companyName"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input size="small" v-model="virtualAccountForm.name"></el-input>
                </el-form-item>
                <el-form-item label="身份证" prop="identityCard">
                    <el-input size="small" v-model="virtualAccountForm.identityCard"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="bossPhone">
                    <el-input size="small" v-model="virtualAccountForm.bossPhone"></el-input>
                </el-form-item>
                <div style="display: flex; justify-content: flex-end">
                    <button class="cancelBtn" @click="visibleAccount = false">取 消</button>
                    <button class="submitBtn" type="primary" @click="submitBindbankCard('virtualAccountForm')">确 定</button>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog class="dialog" title="绑定银行卡" :visible.sync="visibleBindbankCard" width="585px">
            <el-form ref="BindbankCardForm" :model="BindbankCardForm" :rules="BindbankCardRules" label-width="125px">
                <el-form-item label="开户行名称" prop="depositBank">
                    <el-select v-model="BindbankCardForm.depositBank" filterable placeholder="请选择">
                        <el-option v-for="(item,index) in depositBankArr" :key="index+1" :label="item.bname" :value="item.bname">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="银行卡号" prop="bankCardNumber">
                    <el-input size="small" v-model="BindbankCardForm.bankCardNumber"></el-input>
                </el-form-item>
                <el-form-item label="开户名" prop="accountName">
                    <el-input size="small" v-model="BindbankCardForm.accountName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input size="small" v-model="BindbankCardForm.password" show-password></el-input>
                </el-form-item>
                <div style="display: flex; justify-content: flex-end">
                    <button class="cancelBtn" @click="visibleAccount = false">取 消</button>
                    <button class="submitBtn" type="primary" @click="submitBindbankCard('BindbankCardForm')">确 定</button>
                </div>
            </el-form>
        </el-dialog>



    </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb.vue';
import httpApi from "@/http";
export default {
    data() {
        return {
            resultDate: {
				boos:"",
				bossIccard:"",
				bossPhone:""
			},
            bankDate: {},
            virtualAccountState: 0,//虚拟账户状态   假设0 未创建 1审核中 2已创建 3失败
            bankCardState: 0,//银行卡状态 假设0 未绑定 1审核中 2已绑定 3 失败

            depositBankArr: [],//银行名称 选项数组
            visibleAccount: false,
            virtualAccountForm: {
                taxpayerIdentificationNumber: "", //统一社会信用代码
                identityCard: "",//身份证
                name: "",//姓名
                bossPhone: "",//手机号
                companyName: "",//公司名称
            },
            virtualAccountRules: {
                taxpayerIdentificationNumber: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        pattern:
                            /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
                        message: "社会信用代码格式不正确,需18位/15位老工商代码",
                        trigger: "blur",
                    }], //统一社会信用代码
                identityCard: [
                    { required: true, message: "请输入", trigger: "blur" },
                    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: "身份证号码格式不正确", trigger: "blur" }],//身份证
                name: [{ required: true, message: "请输入", trigger: "blur" }],//姓名

                bossPhone: [
                    { required: true, message: "请输入", trigger: "blur" },
                    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }],//手机号
                companyName: [{ required: true, message: "请输入", trigger: "blur" }],//公司名称
            },

            visibleBindbankCard: false,
            BindbankCardForm: {
                depositBank: "",//开户行名称
                bankCardNumber: "",//银行卡号
                accountName: "", //开户名
                password: "",//密码
            },
            BindbankCardRules: {
                depositBank: [{ required: true, message: "请输入", trigger: "blur" }],//开户行名称

                bankCardNumber: [{ required: true, message: "请输入", trigger: "blur" },
                { pattern: /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{17})$/, message: "银行卡号15~18位(非零开头),", trigger: "blur" }],//银行卡号
                accountName: [{ required: true, message: "请输入", trigger: "blur" }], //开户名
                password: [{ required: true, message: "请输入", trigger: "blur" }],//密码
            }
        }
    },
    methods: {
        showAccountDialog() {
            this.visibleAccount = true
        },
        showBankCardDialog() {
            this.visibleBindbankCard = true
            // 获取银行名称选项 信息
            httpApi.basicSettingsApi.getBankNameList().then(res => {
                if (res.data.code == 200) {
                    this.depositBankArr = res.data.data
                }
            })
        },

        //绑定银行卡审核
        submitBindbankCard(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    switch (formName) {
                        case "virtualAccountForm":
                            var params = {
                                boos: this.virtualAccountForm.name,//姓名
                                bossIccard: this.virtualAccountForm.identityCard,//身份证
                                bossPhone: this.virtualAccountForm.bossPhone,//手机号
                                companyName: this.virtualAccountForm.companyName,//companyName
                                socialCreditCode: this.virtualAccountForm.taxpayerIdentificationNumber,//统一社会信用代码
                                memberType: 1
                            }
                            httpApi.basicSettingsApi.memberOpenAnAccount(params).then((res) => {
                                if (res.data.code == 200) {
                                    this.$message.success(res.data.msg)
                                    this.getAcountInfo()
                                }

                            });
                            break;
                        case "BindbankCardForm":
                            var d = {
                                bankAccountName: this.BindbankCardForm.accountName,
                                bankAccount: this.BindbankCardForm.bankCardNumber,
                                bankName: this.BindbankCardForm.depositBank,
                                outPwd: this.BindbankCardForm.password
                            }
                            httpApi.basicSettingsApi.addBindingCard(d).then((res) => {
                                if (res.data.code == 200) {
                                    this.$message.success(res.data.msg)
                                    this.getBindBankCardInfo()
                                }

                            });
                            break;
                    }
                } else {
                    this.$message.error('请填写信息')
                    return false;
                }
            });

        },
        //会员绑卡信息
        getBindBankCardInfo() {
            httpApi.basicSettingsApi.queryBindingCard({}).then((res) => {
                if (res.data.code == 200) {
					if(res.data.data.length>0){
						this.bankDate = res.data.data[0];
						this.bankCardState=2
					}
                }
				
            })
        },
        getAcountInfo() {
            //会员开户信息
            httpApi.basicSettingsApi.queryMemberOpenAnAccount({}).then((res) => {
                if (res.data.code == 200) {
					if(res.data.data!=undefined){
						this.resultDate = res.data.data;
						this.virtualAccountState= 2;
					}
                }

            })
        }

    },
    mounted() {
        this.getAcountInfo()
        this.getBindBankCardInfo()

    },
    components: {
        breadcrumb
    }
}
</script>

<style lang="scss" scoped>
.main {
    padding: 29px 30px 33px 30px;
    background-color: #fff;
    width: 100%;

    .title {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #262626;
        margin-bottom: 25px;

    }



    .item {
        width: 100%;
        display: flex;
        background-color: #F6F7FB;
        height: 92px;
        align-items: center;
        padding: 0 30px;

        &:nth-child(2) {
            margin-bottom: 21px;
        }

        .imgIcon {
            height: 42px;
            width: 42px;
            margin-right: 16px;
        }

        .createdBox {
            display: flex;
            margin-left: auto;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #1890FF;

            .icon-chenggongtishi {
                font-size: 17px;
                margin-right: 6px;
            }
        }



        .textBox {
            display: flex;
            flex-direction: column;

            .tit {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #262626;
                margin-bottom: 9px;
            }

            .description {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #454A4E;
            }

            .errorText {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #F02C2C;
            }
        }

        .createBtn {
            width: 80px;
            height: 36px;
            background: #1890FF;
            border-radius: 4px;
            line-height: 36px;
            text-align: center;
            transition: 0.2s;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            margin-left: auto;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }
        }
    }

}

.dialog {

    // 标题
    ::v-deep .el-dialog__header {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;
        color: #262626;
        font-size: 14px;
        font-weight: bold;
        height: 50px;
    }

    ::v-deep .el-dialog__title {
        font-size: 14px;
        color: #303133;
        font-weight: bold;
    }

    //关闭图标
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
        font-size: 15px;
    }

    ::v-deep .el-form-item__label {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #262626;
    }

    ::v-deep .el-dialog__body {
        padding: 25px 50px 36px 22px;
    }

    .submitBtn {
        width: 80px;
        height: 36px;
        background: #1890FF;
        border-radius: 4px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;

        text-align: center;
        cursor: pointer;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
        }
    }

    .cancelBtn {
        width: 80px;
        height: 36px;

        text-align: center;
        border: 1px solid #D9D9D9;
        border-radius: 4px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #262626;
        cursor: pointer;
        transition: 0.2s;
        margin-right: 14px;

        &:hover {
            border-color: #1890FF;
            color: #1890FF;
        }
    }
}
</style>